
import type { placeholderSign } from 'element-plus/es/components/table-v2/src/private';
<template>
  <div class="app-container">
    <div>
      <el-row :gutter="10">
        <el-col :span="6" :xs="24" :lg="24">
          <div class="bgwhite plr20 ptb20 radius10 flex-col">
            <div class="justify-between w100p">
              <div class="clr3c4 bold ft26">{{ formLabelAlign.editType == 'edit' ? '編輯' : '詳細' }}</div>
              <div class="clr9fa align-center pointer" @click="back()">

                <el-icon>
                  <Back />
                </el-icon>
                <span class="ml5">返回上一頁</span>
                <span class="plr20">|</span>
                <div class="align-center" @click.stop="check()" v-if="formLabelAlign.editType == 'edit'">
                  <el-icon class="clr3c4">
                    <View />
                  </el-icon>
                  <span class="ml5 clr3c4">查看</span>
                </div>
                <div class="align-center" @click.stop="edit()" v-else>

                  <el-icon class="clr3c4">
                    <EditPen />
                  </el-icon>
                  <span class="ml5 clr3c4">编辑</span>
                </div>

                <span class="plr20">|</span>
                <div class="align-center" @click="toDel()">
                  <el-icon class="red">
                    <Delete />
                  </el-icon>
                  <span class="red ml5">刪除</span>
                </div>

              </div>
            </div>
            <div class="mt40">
              <el-form :label-position="labelPosition" label-width="auto" :model="formLabelAlign"
                style="max-width: 600px">
                <el-form-item label="ID:">
                  <el-input v-model="formLabelAlign.id" disabled style="width: 380px;" placeholder="" />
                </el-form-item>
                <el-form-item label="城市名稱:" required v-if="formLabelAlign.editType == 'edit'">
                  <el-input v-model="formLabelAlign.city" placeholder="請輸入消息内容" />
                </el-form-item>
                <el-form-item label="城市名稱:" v-else>
                  <el-input v-model="formLabelAlign.city" placeholder="請輸入消息内容" disabled />
                </el-form-item>
                <el-form-item label="創建時間:">
                  <el-input v-model="formLabelAlign.created_at" disabled style="width: 380px;" placeholder="" />
                </el-form-item>
                <el-form-item label="更新時間:">
                  <el-input v-model="formLabelAlign.updated_at" disabled style="width: 380px;" placeholder="" />
                </el-form-item>
              </el-form>
              <div class="mt40 mb15 flex-cen " v-if="formLabelAlign.editType == 'edit'">
                <div class="align-center">
                  <el-button class="btn1" @click="reset()">重置</el-button>
                  <el-button class="btn2" @click="submit()">提交</el-button>
                </div>

              </div>
            </div>


          </div>

        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import type { FormProps } from 'element-plus'
import { editCity, deleteCity } from '@/api/city.js'

const labelPosition = ref<FormProps['labelPosition']>('right')

const router = useRouter()
const route = useRoute()
const back = () => {
  router.back()
}
onMounted(() => {
  console.log('城市数据', route.query)
  formLabelAlign.id = route.query.id
  formLabelAlign.city = route.query.city
  formLabelAlign.created_at = route.query.created_at
  formLabelAlign.updated_at = route.query.updated_at
  formLabelAlign.editType = route.query.editType
  // formLabelAlign.id = 
})
const formLabelAlign = reactive({
  id: 0,
  city: '',
  created_at: '',
  updated_at: '',
  editType: ''
})
// 去删除
const toDel = () => {
  deleteCity({
    id: formLabelAlign.id
  }).then((res) => {
    console.log('删除城市', res)
    bakc()
  })
}
// 查看
const check = () => {
  formLabelAlign.editType = 'show'
}
// 去编辑页
const edit = () => {
  formLabelAlign.editType = 'edit'
}
const reset = () => {
  formLabelAlign.city = ''
}
const submit = () => {
  editCity({
    id: formLabelAlign.id,
    city: formLabelAlign.city
  }).then((res) => {
    console.log('编辑城市', res)
    back()
  })
}

</script>
<style scoped >
:deep(.el-upload--picture-card) {
  background-color: transparent;
  border: none;
}

:deep(.el-input__wrapper) {
  /* align-items: start; */
}

:deep(.el-input) {
  box-shadow: none;
}
</style>